import { useCallback, useEffect } from "react";
import { Modal, Form, Input, InputNumber, Button, message } from "antd";
import { useForm } from "antd/es/form/Form";
import TextArea from "antd/es/input/TextArea";

import { createMeetingRoom, findMeetingRoom, updateMeetingRoom } from "../../api/meeting";

// 一些可以不写在函数式组件内的变量和方法
export interface SystemModalProps {
    id: number | undefined;
    isOpen: boolean;
    handleClose: Function;
    title: string;
}
export interface CreateMeetingRoom {
    name: string;
    capacity: number;
    location: string;
    equipment: string;
    description: string;
}

export interface UpdateMeetingRoom {
    id: number;
    name: string;
    capacity: number;
    location: string;
    equipment: string;
    description: string;
}

const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 }
}



export function MeetRoomAddEdit(props: SystemModalProps) {
    // hooks变量书写区
    const [form] = useForm();

    
    // 非hooks变量书写区
    // 方法书写区
    const handleOk = useCallback(async () => {
        const values: CreateMeetingRoom = form.getFieldsValue();
        //console.log(values);
        values.description = values.description || "";
        values.equipment = values.equipment || "";
        if(props.id) {
            const res = await updateMeetingRoom({
                ...values,
                id: props.id
            });
            if(res.status === 201 || res.status === 200) {
                message.success("编辑成功");
                form.resetFields();
                props.handleClose();
            }else {
                message.error("编辑失败");
            }
        }else {
            const res = await createMeetingRoom(values);
            if(res.status === 201 || res.status === 200) {
                message.success("创建成功");
                form.resetFields();
                props.handleClose();
            }else {
                message.error("创建失败");
            }
        }
    }, []);
    // 生命周期书写区
    useEffect(()=>{
        if(props.id) {
            findMeetingRoom(props.id).then(res => {
                if(res.status === 200 || res.status === 201) {
                    form.setFieldValue("id", res.data.id);
                    form.setFieldValue("name", res.data.name);
                    form.setFieldValue("location", res.data.location);
                    form.setFieldValue("capacity", res.data.capacity);
                    form.setFieldValue("equipment", res.data.equipment);
                    form.setFieldValue("description", res.data.description);
                }else {
                    message.error("编辑失败");
                }
            })
        }
    }, [props.id])
    // DOM结构书写区
    return (
        <Modal title={props.title}
            okText={'创建'}
            open={props.isOpen} onOk={handleOk} onCancel={()=>{props.handleClose()}}>
            <Form
                form={form}
                colon={false}
                {...layout}>
                <Form.Item 
                    label="会议室名称"
                    name="name"
                    rules={[{required: true, message: "请输入会议室名称"}]}>
                    <Input />
                </Form.Item>
                <Form.Item 
                    label="位置"
                    name="location"
                    rules={[{required: true, message: "请输入会议位置"}]}>
                    <Input />
                </Form.Item>
                <Form.Item 
                    label="容纳人数"
                    name="capacity"
                    rules={[{required: true, message: "请输入会议室容量"}]}>
                    <InputNumber />
                </Form.Item>
                <Form.Item 
                    label="设备"
                    name="equipment">
                    <Input />
                </Form.Item>
                <Form.Item 
                    label="描述"
                    name="description">
                    <TextArea  />
                </Form.Item>
            </Form>
        </Modal>
    )
}